<!-- <template>
    <div class="message-board">
        <div class="message-bot-text" v-if="$store.state.message.status === '200'">
            成功！
        </div>
        <div class="message-bot-text" v-else>
            {{ message }}
        </div>
        <div class="message-bot-btn">
            <button type="button" class="btn btn-light btn-lg" @click="close">好的！</button>
        </div>
    </div>
</template>


<script>
//import { useStore } from 'vuex'
import { ref } from 'vue'

export default {
    name: 'MessageBoard',
    setup() {
        //const store = useStore()
        let msg = ref('')
        // const JSON data = JSON.parse(.data)

        // store.commit('updateCode', {
            
        //     code: ,
        //     message: ,
        // })

        const close = () => {

        }

        return {
            close,
            msg
        }
    }
}
</script>


<style scoped>
div.message-board {
    background-color: rgba(50, 50, 50, 0.5);
    height: 30vh;
    width: 30vw;
    position: absolute;
    top: 30vh;
    left: 35vw;
}
div.message-bot-text {
    text-align: center;
    color: white;
    font-size: 50px;
    font-weight: 600;
    font-style: italic;

}
div.message-bot-btn {
    text-align: center;
    padding-top: 7vh;
}
</style> -->
<template>
    <div :class="(showMessageBar?'':'d-none') + '  message-bar'">
        <div :class="messageClass">
            <Button bsStyle='link' class="btn my-btn close-btn" @click="clearMessageBar">
                <i class="close"></i>
            </Button>
            <div>{{ $store.state.message.messageGroup.message }}</div>
        </div>
    </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
    setup() {
        const store = useStore()        
        let showMessageBar = computed(() => {return store.state.message.messageGroup.message !== '' && store.state.message.messageGroup.message.length > 0 ? true : false;})
        let messageClass = computed(() => {let mgClass = store.state.message.messageGroup.messageClass;
            return "col-12 panel panel-" + mgClass + " " + (showMessageBar.value ? "" : "hidden");})
        const clearMessageBar = () => {
            store.dispatch('clearMessageActions')
        }

        return {
            showMessageBar,
            messageClass,
            clearMessageBar
        }
    }
}
</script>

<style scoped>
.message-bar {
    position: fixed;
    top: 0;
    left: 50%;
    width: 50%;
    min-height: 50px;
    z-index: 9999;
    margin-left: -25%;
}

.message-bar .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    color: #FFF;
}

.message-bar .panel {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-right: 25px;
}

.panel {
    padding: 10px 15px;
}

.panel-danger {
    background-color: #d9534f;
    color: #FFF;
}

.panel-success {
    background-color: #5cb85c;
    color: #FFF;
}

.panel-warning {
    background-color: #f0ad4e;
    color: #FFF;
}
.my-btn {
    width: 38px;
    height: 38px;
}
.close {
    position: relative;
}

.close::before,
.close::after {
    position: absolute;
    content: ' ';
    background-color: white;
    width: 5px;
    height: 18px;
    top: -5px;
    right: 1px;
}

.close::before {
    transform: rotate(45deg);
}

.close::after {
    transform: rotate(-45deg);
}

</style>
    